<template>
	<view class="content">
		<view class="top">
			<view class="top_content">
				<view class="top_text">
					<view class="top_text_name">
						<text class="text1">{{userList.userName}}，上午好!</text>
						<text class="text2">{{userList.roleName}}</text>
					</view>
					<view class="top_text_addr">
						<view style="display: flex;">
							<u-icon name="map" color="#f6d798" size="18"></u-icon>
							<view class="text3">{{userList.regionName}}</view>
							<view class="text4" @click="handleLogout">退出登录</view>
						</view>

					</view>
				</view>
				<view class="img">
					<image :src="userList.image"></image>
				</view>
			</view>
		</view>
		<view class="to_task">
			<u-icon name="bell" color="#c7ae7c" size="28"></u-icon>
			<view class="txt">待办工单</view>
			<view class="tip" v-if="totalCount != 0">{{totalCount}}</view>
		</view>
		<view v-for="(item,index) in taskList" :key="index">
			<view class="showTask" @click="taskDetail(item.taskId,item.taskCode)">
				<view class="task_number">
					<view class="task_order">{{item.taskCode}}</view>
					<text
						:class="'status-' + item.taskStatusTypeEntity.statusId">{{item.taskStatusTypeEntity.statusName}}</text>
					<view class="task_time">{{formatDateTime(item.createTime)}}</view>
				</view>
				<view class="task_addr">
					<u-icon name="map" color="#efa66d" size="18"></u-icon>
					<view class="addr">{{item.addr}}</view>
				</view>
			</view>
		</view>
		<view class="show_text" v-if="totalCount == 0"> 您暂无工单任务！</view>
	</view>
</template>

<script>
	import {
		search
	} from '@/api/task/task.js'
	import {
		findById
	} from '@/api/login'
	export default {
		data() {
			return {
				userId: this.$store.state.user.userId,
				taskList: [],
				userList: [],
				totalCount: 0
			}
		},
		onLoad() {
			this.getTask();
			this.getUser();
		},
		onShow() {
			console.log('页面跳转刷新...');
			this.getTask();
			this.getUser();
		},
		onPullDownRefresh() {
			console.log('开始下拉刷新...');
			this.getTask();
			this.getUser();
			setTimeout(function() {
				uni.stopPullDownRefresh();
				console.log('停止下拉刷新...');
			}, 1500);
		},
		methods: {
			formatDateTime(isoString) {
				if (!isoString) return '';

				const date = new Date(isoString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');

				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			handleLogout() {
				this.$modal.confirm('确定退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			getUser() {
				// 获取用户数据
				findById(this.userId).then(res => {
					this.userList = res
				})
			},
			getTask() {
				search(this.userId, 1).then(res => {

					this.taskList = res.currentPageRecords
					this.totalCount = res.totalCount
				})
			},

			taskDetail(taskId, taskCode) {
				console.log(taskId, taskCode);
				this.$tab.navigateTo(`/pages/task/taskDetail?taskId=${taskId}&taskCode=${taskCode}`);
			}
		}
	};
</script>

<style>
	/* 确保 html 和 body 没有默认的 margin 和 padding */
	html,
	body {
		margin: 0;
		padding: 0;
	}

	.status-1 {
		background-color: #fb6361;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.status-2 {
		background-color: #faad53;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.status-3 {
		background-color: #9e9e9e;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.status-4 {
		background-color: #d8945b;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.content .top {
		padding-bottom: 30px;
		background-color: #282828;
	}

	.top_content {
		display: flex;
		padding-top: 53px;
		padding-left: 35px;
	}

	.top_text {
		color: #fff;
		/* 白色文字，根据背景选择对比度高的颜色 */
		font-family: 'Courier New', Courier, monospace;
	}

	.top_text_name {
		margin-bottom: 10px;
	}

	.top_text_name .text1 {
		font-size: 20px;
	}

	.top_text_name .text2 {
		margin-left: 15px;
		padding: 3px 8px;
		background-color: #d1c0b5;
		color: #000;
		border-radius: 10px;
	}

	.top_text_addr {
		padding-top: 10px;
	}

	.top_text_addr .text3 {
		padding-right: 15px;
		padding-left: 5px;
	}

	.top_text_addr .text4 {
		color: #2179bb;
		font-weight: bold;
	}

	.top_content .img {
		padding-left: 58px;
	}

	.top_content .img image {
		border-radius: 50%;
		width: 70px;
		height: 70px;
	}

	.to_task {
		margin-top: 10px;
		margin-left: 5px;
		display: flex;
	}

	.to_task .txt {
		font-size: 20px;
		font-weight: bold;
		padding: 0 15px;
	}

	.to_task .tip {
		font-size: 12px;
		border-radius: 50%;
		color: white;
		background-color: #ff7676;
		width: 16px;
		height: 16px;
		text-align: center;
	}

	.showTask {
		margin: 20px 10px;
		padding: 20px 10px;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.task_number {
		display: flex;
		justify-content: space-between;
	}

	.task_number .task_order {
		font-size: 16px;
		padding-left: 15px;
		font-weight: bold;
	}

	.task_number .value1 {
		/* 		background-color: #fab055;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px; */
	}

	.task_addr {
		margin-top: 10px;
		margin-left: 15px;
		display: flex;
	}

	.task_addr .addr {
		margin-left: 8px;
	}

	.show_noTask {
		font-size: 20px;
		position: absolute;
		left: 109px;
		bottom: 280px;
	}

	.show_text {
		text-align: center;
		margin-top: 200px;
		font-size: 20px;
		color: #999999;
	}
</style>